<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-form-item label="职位名称" prop="positionName">
          <el-input
            v-model="search.positionName"
            placeholder="请输入职位名称"
            clearable
            size="small"
            @keyup.enter.native="searchQuery"
          />
        </el-form-item>
        <el-form-item label="职位分类" prop="positionCategory">
          <el-select v-model="search.positionCategory">
            <el-option
              v-for="item in controlData.positionCategory"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作地点" prop="workPlace">
          <el-select v-model="search.workPlace">
            <el-option
              v-for="item in controlData.workPlace"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: -2px">
          <el-button type="primary" @click="searchQuery">搜索</el-button>
          <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <qm-table
      :data="query"
      ref="qmTable"
      keyProp="positionId"
      :formOptions="{ labelWidth: '120px' }"
      :modalOptions="{ height: 630 }"
      menuType="text"
      :formValidate="defaultFormValidate"
      isCustomForm
    >
      <qm-table-column field="positionName">职位名称</qm-table-column>
      <qm-table-column
        field="positionCategory"
        fieldType="dict"
        :dictOptions="controlData.positionCategory"
      >职位分类</qm-table-column>
      <qm-table-column field="workPlace" fieldType="dict" :dictOptions="controlData.workPlace">工作地点</qm-table-column>
      <qm-table-column field="workNature" :renderFunc="renderWorkNature">工作性质</qm-table-column>
      <qm-table-column field="experience">经验要求</qm-table-column>
      <qm-table-column field="emolument">招聘薪酬</qm-table-column>
      <qm-table-column field="publisher">发布人</qm-table-column>
      <qm-table-column field="pubdate" fieldtype="date">发布时间</qm-table-column>
      <qm-table-column field="isEnabled" fieldtype="enabledisable">是否启用</qm-table-column>
      <qm-table-column field="departmentName">所属部门</qm-table-column>

      <!-- 表格上面的工具栏，可自行添加和业务相关的按钮 -->
      <template v-slot:toolbar></template>

      <!-- 列表操作列，可自行添加和业务相关的按钮 -->
      <template v-slot:moreBtn="{ row }"></template>
      <template v-slot:form="{ models, model,disabled }">
        <create
          ref="create"
          :models="models"
          :model="model"
          :disabled="disabled"
          :controlData="controlData"
        ></create>
      </template>
    </qm-table>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import Create from "./create";
import lodash from "lodash";
export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/eip/websitePosition/getListModel",
      query: "/eip/websitePosition/query",
      save: "/eip/websitePosition/save",
      delete: "/eip/websitePosition/delete",
      entity: "/eip/websitePosition/getEntity"
    };
  }
  onBeforeSave(postModel) {
    try {
      if (this.$util.isArray(postModel.model.workNature)) {
        postModel.model.workNature = postModel.model.workNature.join(",");
      }
      if (this.$util.isArray(postModel.model.positionTreatment)) {
        postModel.model.positionTreatment = postModel.model.positionTreatment.join(
          ","
        );
      }
      if (this.$util.isArray(postModel.model.departmentId)) {
        this.vm.deptName = this.vm.controlData.deptTree.map(item1 => {
          if (postModel.model.departmentId.includes(item1.id)) {
            return item1.text;
          }
        });
        this.vm.deptName = this.vm.deptName.filter(item => {
          return item != undefined;
        });
        postModel.model.departmentId = postModel.model.departmentId.join(",");
        postModel.deptName = this.vm.deptName.join(",");
      }

      return true;
    } catch (error) {
      return false;
    }
  }
  onAfterGetEntity(r) {
    if (r.models.model.workNature !== null) {
      r.models.model.workNature = r.models.model.workNature.split(",");
    }
    if (r.models.model.positionTreatment !== null) {
      r.models.model.positionTreatment = r.models.model.positionTreatment.split(
        ","
      );
    }
    if (r.models.model.departmentId !== null) {
      r.models.model.departmentId = r.models.model.departmentId.split(",");
    }

    const { displayName } = r.controlData.currentUser;
    const nowDate = new Date();
    r.models.model = lodash.extend({}, r.models.model, {
      pubdate: formatter.formatDate(nowDate, "yyyy-MM-dd hh:mm"),
      publisher: displayName
    });
  }
  mixin() {
    return {
      components: {
        Create
      },
      data() {
        return {
          deptName: [],
        };
      },
      methods: {
        renderWorkNature(data, row, column) {
          data = data.split(",");
          let workNatureName = this.controlData.workNature.map(item => {
            if (data.includes(item.code)) {
              return item.name;
            }
          });
          workNatureName = workNatureName.filter(item => {
            return item !== undefined;
          });
          return workNatureName.join(",");
        },
        renderPositionTreatment(data, row, column) {
          data = data.split(",");
          let positionTreatmentName = this.controlData.positionTreatment.map(
            item => {
              if (data.includes(item.code)) {
                return item.name;
              }
            }
          );
          positionTreatmentName = positionTreatmentName.filter(item => {
            return item !== undefined;
          });
          return positionTreatmentName.join("\n");
        }
       
      }
    };
  }
}
</script>

<style scoped lang="scss">
</style>